#box {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;

  //导航栏开始
  .head {
    background-color: black;
    background: linear-gradient(to bottom, rgba($color: #000, $alpha: 0.5), rgba($color: #000, $alpha: 0.1));
    position: absolute;
    // z-index: 999;
    top: 0;
    width: 100%;

    .head-box {
      display: flex;
      justify-content: space-around;
      // padding-left: 10px;
      width: 90%;
      margin: auto;
      align-items: center;
      .head-left {
        img {
          width: 100%;
          height: 60px;
        }
      }

      .head-right {
        display: flex;
        align-items: center;
        padding-right: 40px;

        .none {
          display: none;
        }

        ul {
          display: flex;
          list-style-type: none;
          flex-wrap: wrap;

          li {
            padding: 12px;
            color: #fff;

            a {
              text-decoration: none;
              color: #fff;
              display: block;
              padding-left: 10px;
            }
          }

          li:hover {
            transform: scale(1.2);
          }
        }

        .input {
          position: relative;
          align-items: center;
          // align-self: center;
          width: 20px;
          background-color: #fff;
          height: 20px;
          border-radius: 50px;

          img {
            position: absolute;
            width: 15px;
            top: 2px;
            border-radius: 50px;
            left: 3px;
          }

          // input {
          //   height: 20px;
          //   border-radius: 10px;
          //   border: 1px solid white;
          // }
        }
      }
    }

  }

  // 导航栏结束
  // banner图开始
  .banner {
    width: 100%;

    img {
      width: 100%;
    }
  }

  // banner图结束
  // 内容开始
  .content {
    background-color: #eef8fc;

    .content-box {
      width: 90%;
      margin: auto;
      display: flex;
      justify-content: space-between;



      .content-left {
        margin-top: -80px;
        width: 15%;
      }

      .content-left ul {
        list-style: none;
        list-style-position: inside;
        padding: 0;
        margin: 0;
        background-color: #fff;
        border-radius: 10px;
        position: sticky;
        top: 10px;
        overflow: hidden;

        .top1 {
          padding-left: 5px;
          text-align: center;
          height: 60px;
          padding-top: 15px;
          background-color: rgba($color: #ff0000, $alpha: 0.8);
          color: #fff;
          font-size: 22px;

          .span {
            display: block;
            font-size: 14px;
          }
        }

        li {

          // padding-left: 5px;
          a {
            text-decoration: none;
            display: block;
            color: #888888;
            border: 1px solid #e6e6e6;
            // width: 100%;
            height: 40px;
            line-height: 40px;
            padding-left: 15px;

            .span1 {
              margin-left: 70px;
              font-size: 20px;
            }
          }

          a:hover {
            font-size: 20px;
            color: red;
          }
        }

        li:nth-child(8) a {
          border-bottom-left-radius: 10px;
          border-bottom-right-radius: 10px;
        }
      }
    }

    .content-right {
      width: 80%;
      background-color: #fff;
      border: 1px solid #e0e6e8;
      margin-bottom: 120px;
      padding-bottom: 20px;

      .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20px;
        border-bottom: 1px solid #c3c3c3;
        height: 50px;

        // padding: 5px;
        .top-left {
          border-bottom: 5px solid red;
          font-size: 24px;
          height: 100%;
          line-height: 50px;
          padding-left: 5px;
          padding-right: 5px;
          color: #ff0000;
        }

        .top-right {
          display: flex;
          align-items: center;
          padding-right: 5px;
        }
      }

      .font {
        h2 {
          text-align: center;
        }

        p {
          text-indent: 2em;
          padding: 10px;
          letter-spacing: 3px;
        }
      }
    }

  }

  // 内容结束
  // 尾部开始
  .foot {
    background-color: #c62c30;
    position: relative;

    .foot-content {
      width: 85%;
      margin: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 30px;
      padding-bottom: 60px;

      .foot-left {
        // border: 1px solid red;
        border-right: 1px solid #fff;
        width: 35%;

        img {
          width: 80%;
          height: 80px;
        }
      }

      .foot-center {
        display: flex;
        justify-content: space-between;
        color: #fff;
        width: 50%;
        font-size: 18px;
      }

      .foot-right {
        width: 10%;

        img {
          width: 100%;
        }
      }
    }

    .foot-bottom {
      position: absolute;
      bottom: 0;
      text-align: center;
      width: 100%;
      // border: 1px solid red;
      height: 40px;
      line-height: 40px;
      color: #a37d7d;
      background-color: rgba($color: #000, $alpha: 0.5);
    }
  }

  // 尾部结束
}